<script setup>
import { codedate } from '@/api/login'
import { ref, computed } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()
const userlist = ref('')
const username = ref('')
const value = ref('')
const massage = ref([])


let res = new RegExp(/^(?:(?:\+|00)86)?1\d{10}$/)
const add1 = computed(() => {
    return !res.test(userlist.value)

})

function coderes() {
    codedate().then(res => {
        massage.value = res.data.data
        // console.log(res.data.data);
        console.log(massage.value.number);
        if (res.data.data.code !== '200') {

            return showFailToast('获取验证码失败');

        }

        showSuccessToast('获取验证码成功');
    })
}

function add2() {
    console.log(username.value);
    if (username.value == massage.value.number) {
        showSuccessToast('登陆成功');
        router.push('/step')
    } else {
        return showFailToast('获取验证码失败');
    }
}
</script>

<template>
    <div class="top">
        <div class="top1">
            <p>主题咖app</p>
            <p>出行更方便</p>
        </div>
        <van-cell-group inset class="top4">
            <van-field v-model="userlist" name="手机号" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
        </van-cell-group>


        <van-cell-group inset class="top3">
            <van-field v-model="username" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button @click="coderes" size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <van-button type="success" class="top5" :disabled="add1" @click="add2">点击提交</van-button>

    </div>
</template>




<style scoped>
.top {
    width: 100%;
    height: 100%;
    background-image: url(https://img0.baidu.com/it/u=1687518564,1496770614&fm=253&fmt=auto&app=138&f=PNG?w=500&h=896);
    /* opacity: 0.7; */

}

.top1 {
    position: absolute;
    left: .5rem;
    top: 1.6rem
}

.top1 p:nth-child(1) {
    color: aliceblue;
    font-size: .3rem;
    margin-bottom: .05rem;

}

.top1 p:nth-child(2) {
    color: aliceblue;
    font-size: .2rem;
    margin-top: .05rem;

}

.top3 {
    width: 90%;
    height: 7%;
    position: absolute;
    top: 3.5rem;

}

.top4 {
    width: 90%;
    height: 7%;

    position: absolute;
    top: 2.9rem;
}

.top5 {
    height: 7%;

    position: absolute;
    top: 4.1rem;
    left: .15rem;
    width: 90%;


}
</style>